import type { CreateCrudOptionsRet } from '@fast-crud/fast-crud';

import { ref } from 'vue';

import { DefGenTableApi } from '#/api/devOperation/developer/defGenTable';
import { DictEnum } from '#/enums/commonEnum';
import { useMessage } from '#/hooks/web/useMessage';
import { backendDict } from '#/plugins/fast-crud/common';

export function createCrudOptions(): CreateCrudOptionsRet {
  const selectedRowKeys = ref<string[]>([]);
  const { createMessage } = useMessage();
  const fosDict = backendDict({
    type: DictEnum.FileOverrideStrategyEnum,
  });

  return {
    crudOptions: {
      container: {
        is: 'fs-layout-card',
      },
      request: {
        infoRequest: DefGenTableApi.infoRequest,
      },
      actionbar: {
        buttons: { add: { show: false } },
      },
      table: {
        striped: true,
        rowKey: 'id',
        rowSelection: {
          type: 'checkbox',
          selectedRowKeys,
          onChange: (changed: string[]) => {
            selectedRowKeys.value = changed;
          },
        },
      },
      form: {
        mode: 'edit',
        group: {
          type: 'tabs', // collapse, tabs
          accordion: false, // 手风琴模式
          displayDirective: 'show',
          triggerAreas: ['arrow'],
          groups: {
            backend: {
              header: '后端',
              columns: [
                'allBack',
                'entity',
                'saveVo',
                'updateVo',
                'pageQuery',
                'resultVo',
                'enum',
                'sql',
                'xml',
                'mapper',
                'manager',
                'service',
                'controller',
                'echoList',
              ],
            },
            front: {
              header: '前端',
              columns: [
                'allFront',
                'index',
                'edit',
                'data',
                'api',
                'model',
                'langEn',
                'langZh',
              ],
            },
          },
        },
      },
      columns: {
        allBack: {
          title: '批量设置',
          type: 'dict-radio',
          dict: fosDict,
          form: {
            component: { optionName: 'a-radio-button' },
            col: { span: 24 },
            valueChange({ form, value }) {
              form.enum = value;
              form.saveVo = value;
              form.updateVo = value;
              form.resultVo = value;
              form.pageQuery = value;
              form.sql = value;
              form.entity = value;
              form.xml = value;
              form.mapper = value;
              form.manager = value;
              form.service = value;
              form.controller = value;
              form.echoList = value;

              createMessage.success(`已级联修改其他后端配置`);
            },
          },
        },
        entity: {
          title: 'entity',
          type: 'dict-radio',
          dict: fosDict,
          form: { component: { optionName: 'a-radio-button' } },
        },
        saveVo: {
          title: 'saveVo',
          type: 'dict-radio',
          dict: fosDict,
          form: { component: { optionName: 'a-radio-button' } },
        },
        updateVo: {
          title: 'updateVo',
          type: 'dict-radio',
          dict: fosDict,
          form: { component: { optionName: 'a-radio-button' } },
        },
        resultVo: {
          title: 'resultVo',
          type: 'dict-radio',
          dict: fosDict,
          form: { component: { optionName: 'a-radio-button' } },
        },
        pageQuery: {
          title: 'pageQuery',
          type: 'dict-radio',
          dict: fosDict,
          form: { component: { optionName: 'a-radio-button' } },
        },
        enum: {
          title: 'enum',
          type: 'dict-radio',
          dict: fosDict,
          form: { component: { optionName: 'a-radio-button' } },
        },
        sql: {
          title: 'sql',
          type: 'dict-radio',
          dict: fosDict,
          form: { component: { optionName: 'a-radio-button' } },
        },
        xml: {
          title: 'xml',
          type: 'dict-radio',
          dict: fosDict,
          form: { component: { optionName: 'a-radio-button' } },
        },
        mapper: {
          title: 'mapper',
          type: 'dict-radio',
          dict: fosDict,
          form: { component: { optionName: 'a-radio-button' } },
        },
        manager: {
          title: 'manager',
          type: 'dict-radio',
          dict: fosDict,
          form: { component: { optionName: 'a-radio-button' } },
        },
        service: {
          title: 'service',
          type: 'dict-radio',
          dict: fosDict,
          form: { component: { optionName: 'a-radio-button' } },
        },
        controller: {
          title: 'controller',
          type: 'dict-radio',
          dict: fosDict,
          form: { component: { optionName: 'a-radio-button' } },
        },
        echoList: {
          title: 'echoList',
          type: 'dict-radio',
          dict: fosDict,
          form: { component: { optionName: 'a-radio-button' } },
        },
        allFront: {
          title: '批量设置',
          type: 'dict-radio',
          dict: fosDict,
          form: {
            component: { optionName: 'a-radio-button' },
            col: { span: 24 },
            valueChange({ form, value }) {
              form.api = value;
              form.model = value;
              form.langEn = value;
              form.langZh = value;
              form.data = value;
              form.index = value;
              form.edit = value;
              createMessage.success(`已级联修改其他前端配置`);
            },
          },
        },
        index: {
          title: 'index.vue',
          type: 'dict-radio',
          dict: fosDict,
          form: { component: { optionName: 'a-radio-button' } },
        },
        edit: {
          title: 'edit.vue',
          type: 'dict-radio',
          dict: fosDict,
          form: { component: { optionName: 'a-radio-button' } },
        },
        data: {
          title: 'crud.tsx',
          type: 'dict-radio',
          dict: fosDict,
          form: { component: { optionName: 'a-radio-button' } },
        },
        api: {
          title: 'api.ts',
          type: 'dict-radio',
          dict: fosDict,
          form: { component: { optionName: 'a-radio-button' } },
        },
        model: {
          title: 'model.ts',
          type: 'dict-radio',
          dict: fosDict,
          form: { component: { optionName: 'a-radio-button' } },
        },
        langEn: {
          title: 'langEn.json',
          type: 'dict-radio',
          dict: fosDict,
          form: { component: { optionName: 'a-radio-button' } },
        },
        langZh: {
          title: 'langZh.json',
          type: 'dict-radio',
          dict: fosDict,
          form: { component: { optionName: 'a-radio-button' } },
        },
      },
    },
  };
}
